<template>
	<view class="home" :style="bgStyle">
		<custom-navbar title="园区介绍" :show-back="true" @back="handleBack" />

		<view class="content p30 pb150 mt30" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 顶部视频 -->
			<view class="video mb40" @click="playVideo(parkData.top)">
				<image class="video-cover" :src="parkData.top.cover_image" mode="aspectFill"></image>
				<image class="play-icon" src="/static/images/common/play.png"></image>
			</view>

			<!-- 园区介绍 -->
			<view class="introduce mb40">
				<!-- 两列网格布局 -->
				<view class="grid-container">
					<view class="grid-item" v-for="(item,index) in parkData.list" :key="index" @click="playVideo(item)">
						<image class="img" :src="item.cover_image" mode="aspectFill"></image>
						<view class="f26bc0 h70 fc">
							<view class="ml20">{{item.video_title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		useUserStore
	} from '@/stores/user'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		parkDisplay
	} from '@/api/park'
	import CustomNavbar from '@/components/custom-navbar.vue'
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	const {
		t
	} = useI18n()
	const userStore = useUserStore()

	// 系统信息
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	const bgStyle = ref({})

	// 园区数据
	const parkData = ref({
		top: {
			video_id: 0,
			video_title: '',
			cover_image: '',
			video_path: ''
		},
		list: [],
		introduction: ''
	})

	// 初始化加载数据
	onMounted(() => {
		bgStyle.value = {
			backgroundImage: `url(https://gx.jifgou.com/image/homebg.png)`,
			backgroundSize: '100% auto',
			backgroundRepeat: 'no-repeat',
			minHeight: '100vh'
		}

		loadParkData()
	})

	// 加载园区展示数据
	const loadParkData = async () => {
		try {
			const res = await parkDisplay()
			if (res.code === 200) {
				parkData.value = res.data
			}
		} catch (error) {
			console.error('加载园区数据失败:', error)
			uni.showToast({
				title: '加载数据失败',
				icon: 'none'
			})
		}
	}

	// 播放视频
	const playVideo = (video) => {
		uni.navigateTo({
			url: `/pages/park/videoPlayer?videoUrl=${encodeURIComponent(video.video_path)}&title=${video.video_title}`
		})
	}

	const handleBack = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 44px);
			display: flex;
			flex-direction: column;

			.video {
				width: 100%;
				height: 388rpx;
				border-radius: 20rpx;
				position: relative;

				.video-cover {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

				.play-icon {
					position: absolute;
					width: 80rpx;
					height: 80rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.introduce {
				width: 100%;

				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: -8rpx;
					}
				}

				.Frame {
					width: 20rpx;
					height: 20rpx;
				}

				.grid-container {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 20rpx;
					width: 100%;

					.grid-item {
						background: #FFFFFF;
						border-radius: 20rpx;

						.img {
							width: 100%;
							height: 169rpx;
							border-radius: 20rpx 20rpx 0 0;
						}

						.h70 {
							height: 70rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

	/* 公共样式 */
	.fcsb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fcc {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fc {
		display: flex;
		align-items: center;
	}

	.f36bc0 {
		font-size: 36rpx;
		font-weight: bold;
		color: #000;
	}

	.f26bc0 {
		font-size: 26rpx;
		font-weight: bold;
		color: #000;
	}

	.f24c6 {
		font-size: 24rpx;
		color: #666;
	}

	.ml5 {
		margin-left: 5rpx;
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.mr20 {
		margin-right: 20rpx;
	}

	.mb40 {
		margin-bottom: 40rpx;
	}

	.mb48 {
		margin-bottom: 48rpx;
	}

	.p30 {
		padding: 30rpx;
	}

	.pb150 {
		padding-bottom: 150rpx;
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.br20 {
		border-radius: 20rpx;
	}
</style>